<script setup>
import { ref } from 'vue'
import CapacityPlanCard from './components/CapacityPlanCard/index.vue'
import CapacityWeekBar from './components/CapacityWeekBar/index.vue'

const monthTitle = '月工单完成情况'

const annualTitle = '年工单完成情况'

const monthList = [
    {
        name: '计划数',
        value: 1028
    },
    {
        name: '已完成',
        value: 920
    }
]

const annualList = [
    {
        name: '计划数',
        value: 9832
    },
    {
        name: '已完成',
        value: 9266
    }
]
</script>

<template>
    <div class="com-bottom-card">
        <div class="com-card-head">
            <h1>产能趋势</h1>
        </div>
        <div class="com-block-content block">
            <CapacityWeekBar class="bar" />
            <div class="cards">
                <CapacityPlanCard :title="monthTitle" :list="monthList" />
                <CapacityPlanCard :title="annualTitle" :list="annualList" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.block {
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    .bar {
        width: 280px;
        height: 180px;
    }
    .cards {
        width: 150px;
        height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>
